// ----- Tables styles.
// Default styles for all the tables
table {
  max-width: 100%;
}

table th {
  color: $shade-strong-100;
  font-weight: bold;
  text-align: left;
  vertical-align: bottom;
}

table td {
  vertical-align: top;
}

// Table models
.dataTable,
.dataTableLine,
.dataTableNoBorder,
.dataOutput,
.dataList,
.dataInput {
  background-color: $shade-light-0;
  border-color: $shade-light-50;
  clear: both;
  line-height: 1.3em;
  margin: 0 0 .8em;
  width: 100%;
}

.dataTableNoBorder {
  max-width: 100em;
}

.dataInput {
  background-color: transparent;
  max-width: 55em;
}

.containerWidgetPanel .dataInput,
.studioFormTable.dataInput {
  max-width: none;
}

.dataTable th,
.dataTableLine th,
.dataTableLine th,
.dataOutput th,
.dataList th {
  background-color: $shade-light-10;
  border-color: $shade-light-50;
  border-width: 1px;
  padding: .7em .4em .7em 0;
}

.dataTable tr,
.dataTableLine tr {
  transition: all .15s ease 0s;
}

.dataRowOdd:hover,
.dataRowEven:hover,
.dataTable tr:hover,
.dataTableLine tr:hover {
  background-color: $shade-light-10;
}

.dataTable,
.fieldColumn .dataTable {
  border-collapse: separate;
  border-radius: $common-radius;
  border-style: solid none none solid;
  border-width: 1px;
}

.dataTable th,
.dataTable td {
  border-color: $shade-light-50;
  border-style: none solid solid none;
  border-width: 1px;
  padding: .7em .4em;
}

.dataTable th:first-child,
.dataTable td:first-child,
.dataList th:first-child,
.dataList td:first-child,
.dataOutput th:first-child,
.dataOutput td:first-child,
.dataTableLine th:first-child,
.dataTableLine td:first-child {
  padding-left: .5em;
}

.dataTableLine th,
.dataOutput th,
.dataList th {
  border-style: none none solid;
  white-space: nowrap;
}

.dataTable th a,
.dataTableLine th a,
.dataTableNoBorder th a,
.dataList th a,
.dataOutput th a {
  color: $shade-strong-100;
}

.dataTable th a:hover,
.dataTableLine th a:hover,
.dataTableNoBorder th a:hover,
.dataList th a:hover,
.dataOutput th a:hover {
  color: $link;
  text-decoration: none;
}

.dataTable th img,
.dataTableLine th img,
.dataTableNoBorder th img,
.dataList th img,
.dataOutput th img {
  margin: 0 0 0 .2em;
  padding: 0;
  vertical-align: bottom;
}

.dataTableLine,
.dataTableLine td,
.dataList,
.dataList td,
.dataOutput,
.dataOutput td {
  border-color: $shade-light-50;
  border-style: solid none;
  border-width: 1px;
  padding: .7em .6em .7em 0;
}

.dataTableLine,
.dataList,
.dataOutput {
  border: 1px solid $shade-light-50;
}

.dataTableNoBorder,
.dataTableNoBorder th,
.dataTableNoBorder td,
.dataInput,
.dataInput th,
.dataInput td {
  background-color: transparent;
  border: 0;
  padding: .5em .6em .6em .5em;
}

.dataTable .dataTable,
.dataTableLine .dataTableLine,
.dataTableNoBorder .dataTableNoBorder {
  margin: 0;
}

.dataTable td td,
.dataTableLine td td,
.dataOutput td td,
.dataList td td,
.dataOutput .dataInput td {
  border: 0;
}

.dataTable td th,
.dataTable td td,
.dataTableLine td th,
.dataTableLine td td,
.dataInput td th,
.dataInput td td,
.dataOutput td th,
.dataOutput td td {
  padding: 0 .3em .5em 0;
}

table.smallTable th,
table.smallTable td {
  padding: .2em .4em .3em 0;
}

.dataTable.smallTable th,
.dataTable.smallTable td,
.dataTableLine.smallTable th,
.dataTableLine.smallTable td,
.dataInput.smallTable th,
.dataInput.smallTable td,
.dataTableNoBorder.smallTable th,
.dataTableNoBorder.smallTable td {
  padding: .2em;
}

.dataList td .button,
.dataTable td .button,
.dataTableLine td .button {
  margin-bottom: .1em;
}

th:first-child input[type="checkbox"] {
  width: 1.9em;
}

.fieldColumn .dataTable.widgetTable {
  border: 1px solid $shade-light-50;
}

.fieldColumn .dataTable.widgetTable td,
.fieldColumn .dataTable.widgetTable th {
  padding: .3em;
}

.fieldColumn .dataTable tr:hover {
  background-color: inherit;
}

.buttonsGadgetNoForm {
  margin: 0 .4em;
}

.dataInput .button,
.dataTableNoBorder .button,
.buttonsGadgetNoForm .button {
  margin: 0 1em .4em 0;
  vertical-align: top;
}

.dataOutput .button {
  margin: .2em 1em .2em 0;
}

.dataOutput .smallButton {
  margin: 0 .5em 0 0;
  padding: .25em .4em;
}

table.noHover tr:hover {
  background: 0;
}

// Specifics
.boldColumn {
  font-weight: bold !important;
}

.buttonColumn {
  // deprecated ?
  text-align: center;
  width: 280px;
}

.focusColumn {
  background-color: $shade-light-20;
}

.radioColumn {
  // deprecated ?
  padding: 0 0 0 .5em;
  width: 8px;
}

.iconColumn {
  text-align: center;
  width: 1.8em;
}

.iconColumn img {
  background: none;
  position: relative;
  z-index: 25;
}

.actionsColumn {
  text-align: right;
}

.actionsColumn img,
.actionsColumn a {
  display: inline-block;
  margin: 0 0 0 .2em;
}

.actionsColumn .smallButton {
  margin: 0 .2em;
  padding: .2em .3em;
}

div.actionsColumn {
  display: inline-block;
  float: right;
}

.dataTableNoHeader th {
  background-color: transparent;
}

.buttonsGadget {
  margin: .4em 0 .4em 11.9em;
}

.smallButtonsGadget {
  margin: 0 0 .4em 7em;
}

.buttonsGadget .actionsWidgetPanel,
#selection_buttons .actionsWidgetPanel {
  padding: 0;
}

.buttonsGadget .smallButton:first-child {
  margin-left: 1.1em;
}

.buttonsGadget .actionsWidgetPanel {
  padding-left: .2em;
}

.nxDraggable .icon,
.iconColumn .nxDraggable {
  cursor: move;
}

.labelColumn {
  font-weight: bold;
  width: 12em;
}

.labelColumn span {
  display: block;
}

.fieldColumn img {
  margin: 0 .4em -.2em .2em;
}

.fieldColumn + .labelColumn {
  padding-right: 1em;
  text-align: right;
}

#fancybox-content .labelColumn {
  width: 10em;
}

.labelColumn .widgetHelpLabel span {
  display: inherit;
}

// =Generic table styles for Widgets in Layouts
.containerSubWidget {
  margin: 0 .6em .6em 0;
}

.dataInput .fieldColumn .containerSubWidget {
  margin-right: 0;
}

.widgetTable .widgetPanel {
  margin: 0;
  padding: 0;
}

// Local configuration table styles
.palettePreviewLogo {
  float: left;
  width: 100px;
}

table.palettePreviewColors {
  border-collapse: separate;
  border-spacing: 3px;
  display: inline;
  float: left;
  vertical-align: middle;
}

table.palettePreviewColors td {
  border: 1px solid $shade-strong-20;
}

table.palettePreviewColors td div {
  height: 8px;
  width: 10px;
}

// Compat styles <5.8
.dataOutput2Columns {
  margin-bottom: .4em;
  margin-top: .7em;
}

.twoColumns {
  // replaced by .fiftyPercent
  width: 50%;
}

.iconColumn .cell {
  background: none;
  width: 1.8em;
}

.dataInputGroup {
  margin: 0;
  padding: 0;
}

.complexWidgetTable .boldColumn,
.complexWidgetTable .labelColumn {
  width: 35%;
}

//  =Relations
.relationObjectColumn,
.relationPredicateColumn,
.relationCreateLabelColumn {
  width: 100px;
}

.relationActionsColumn {
  text-align: center;
  width: 60px;
}

.workflowFieldColumn table,
.relationCreateFieldColumn table {
  border: 0;
  margin: 0;
}

.vocabularyEntryContent {
  margin-left: 1.6em;
}

.vocabularyEntryContent .notEditable {
  background-color: $shade-light-0;
}

.vocabularyEntryContent .dataInput {
  border: 0;
  margin-bottom: 1.4em;
}

.listItem .moveUpBtn,
.listItem .moveDownBtn,
.listItem .deleteBtn {
  display: block;
  height: 16px;
  width: 16px;
}

.listItem .moveUpBtn {
  background-image: url('${basePath}/icons/go_up.png');
}

.listItem .moveDownBtn {
  background-image: url('${basePath}/icons/go_down.png');
}

.listItem .deleteBtn {
  background-image: url('${basePath}/icons/delete.png');
}

// The following rules are expanded to prevent cascading into other list items.
// This works for action buttons at a fixed maximum depth (currently 4).
.listItem:nth-of-type(1) > :not(.listItem) > .moveUpBtn,
.listItem:nth-of-type(1) > :not(.listItem) > :not(.listItem) > .moveUpBtn,
.listItem:nth-of-type(1) > :not(.listItem) > :not(.listItem) > :not(.listItem) > .moveUpBtn,
.listItem:nth-of-type(1) > :not(.listItem) > :not(.listItem) > :not(.listItem) > :not(.listItem) > .moveUpBtn {
  background-image: url('${basePath}/icons/inactive_go_up.png');
  cursor: default;
  pointer-events: none;
}

.listItem:nth-last-of-type(1) > :not(.listItem) > .moveDownBtn,
.listItem:nth-last-of-type(1) > :not(.listItem) > :not(.listItem) > .moveDownBtn,
.listItem:nth-last-of-type(1) > :not(.listItem) > :not(.listItem) > :not(.listItem) > .moveDownBtn,
.listItem:nth-last-of-type(1) > :not(.listItem) > :not(.listItem) > :not(.listItem) > :not(.listItem) > .moveDownBtn {
  background-image: url('${basePath}/icons/inactive_go_down.png');
  cursor: default;
  pointer-events: none;
}

.table-overflow {
  overflow: auto;
}